<template>
	<view class="player-popup">
		<uni-popup class="popup" ref="popupRef" type="bottom" :safe-area="false">
			<view class="popup-content">
				<view class="content-title-box">
					<view class="content-title">{{ currentPlayingItem.script_name }}</view>
					<view class="content-tip" v-if="currentPlayingItem.isEnd">已完结</view>
				</view>

				<view class="content-selectbar">
					<SelectTabbar ref="selectTabbarRef" :select-data="tabsCpt" @tab-click="handleTabClick" :tab-item-style="tabItemStyle" active-color="#FF5F04" />
				</view>

				<scroll-view class="content-cards" scroll-y enable-back-to-top>
					<view class="content-cards-wrapper">
						<block v-for="(item, index) in playerDataCountCpt" :key="index">
							<view
								class="content-card-item"
								:class="{ active: currentPlayingItem.current_episode == playerData.detail[index + 30 * currentPage].current_episode }"
								@click="handleChangeEpisode(playerData.detail[index + 30 * currentPage].current_episode)"
							>
								{{ playerData.detail[index + 30 * currentPage].current_episode }}
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import SelectTabbar from '@/components/select-tabbar/select-tabbar.vue';
	import usePlayerStore from '@/stores/player/player.js';
	import { storeToRefs } from 'pinia';
	import { ref, onMounted, nextTick, computed } from 'vue';

	// - props/emit
	defineProps({
		currentPlayingItem: Object
	});
	const emit = defineEmits(['changeEpisode']);

	// - store
	const playerStore = usePlayerStore();
	const { playerData } = storeToRefs(playerStore);

	// - data
	const popupRef = ref(null);
	const selectTabbarRef = ref(null);
	const currentPage = ref(0);
	const tabItemStyle = {
		fontSize: '28rpx',
		marginRight: '60rpx',
		color: '#000000'
	};

	// - computed
	// 计算tabs
	const tabsCpt = computed(() => {
		const tabs = [];

		if (playerData.value.total) {
			const count = Math.floor(playerData.value.total / 30);
			const last = playerData.value.total;

			if (last < 30) {
				// total 小于30
				tabs.push({
					label: 1 + '-' + last,
					value: 0
				});
			} else {
				// total 正常大于等于30
				for (let i = 1; i <= count; i++) {
					tabs.push({
						label: 1 + (i - 1) * 30 + '-' + i * 30,
						value: count - 1
					});
				}

				// 边界处理
				if (count * 30 + 1 == last) {
					// 最后正好只多了1的情况（例如 31-31 61-61）
					tabs.push({
						label: '' + last,
						value: count
					});
				} else if (count * 30 < last) {
					// 4. 最后边界正常取最终数
					tabs.push({
						label: 1 + count * 30 + '-' + last,
						value: count
					});
				}
			}
		}

		return tabs;
	});
	// 计算
	const playerDataCountCpt = computed(() => {
		let count = 0;

		if (tabsCpt.value.length > 0) {
			const itemLabel = tabsCpt.value[currentPage.value].label;

			if (itemLabel.includes('-')) {
				count = Number(itemLabel.split('-')[1] - 30 * currentPage.value);
			} else {
				count = Number(itemLabel);
			}
		}

		return count;
	});

	// - methods
	// 切换select tabbar的索引时改变滑动页
	const handleTabClick = ({ index }) => {
		currentPage.value = index;
	};
	// 开启pop
	const handleOpenPop = () => {
		nextTick(() => {
			popupRef.value.open();
		});
	};
	// 关闭pop
	const handleClosePop = () => {
		nextTick(() => {
			popupRef.value.close();
		});
	};
	const handleChangeEpisode = (item) => {
		emit('changeEpisode', item);
		handleClosePop();
	};

	// - expose
	defineExpose({
		handleOpenPop,
		handleClosePop
	});
</script>

<style lang="scss">
	.player-popup {
		.popup {
			width: 100%;
			overflow: hidden;

			.popup-content {
				width: 100%;
				// min-height: 50vh;
				background-color: #ffffff;
				box-sizing: border-box;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				overflow: hidden;

				.content-title-box {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					box-sizing: border-box;
					padding: 0 22rpx;
					width: 100%;
					height: 128rpx;
					color: #333333;

					.content-title {
						font-size: 36rpx;
						font-weight: bold;
					}
					.content-tip {
						font-size: 22rpx;
						font-weight: 400;
						border-radius: 10rpx;
						background: #d6d5d9;
						color: #6c6c6c;
						padding: 5rpx 10rpx;
						margin-left: 10rpx;
					}
				}

				.content-selectbar {
					width: 100%;
					position: relative;
					box-sizing: border-box;
					padding-left: 22rpx;
				}

				.content-cards {
					height: 730rpx;

					.content-cards-wrapper {
						width: 100%;
						overflow-y: auto;
						display: grid;
						grid-template-columns: repeat(6, 1fr);
						grid-column-gap: 20rpx;
						grid-row-gap: 25rpx;
						box-sizing: border-box;
						padding: 50rpx 30rpx 0 30rpx;

						.content-card-item {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 100rpx;
							font-size: 32rpx;
							font-weight: bold;
							border-radius: 10rpx;
							background: #d6d5d9;
							color: #000000;
						}
					}
				}

				.active {
					color: #ff5f04 !important;
				}
			}
		}
	}
</style>
